<!DOCTYPE html>
<html lang="en">
<head>
  	<title>Functional Slider</title>
  	<meta charset="utf-8">
    <meta name="description" content="Your description">
    <meta name="keywords" content="Your keywords">
    <meta name="author" content="Your name">
<link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-1.7.1.min.js"></script>
    <script src="js/script.js"></script>
<!--[if lt IE 8]>
   <div style=' clear: both; text-align:center; position: relative;'>
     <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
       <img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
    </a>
  </div>
<![endif]-->
<!--[if lt IE 9]>
	<script src="js/html5.js"></script>
	<link rel="stylesheet" href="css/ie.css"> 
<![endif]-->
</head>
<body id="propage">
<!-- PRO Framework Panel Begin -->
<div id="advanced"><span class="trigger"><strong></strong><em></em></span><div class="bg_pro"><div class="pro_main"><span class="pro_logo"></span><ul class="pro_menu"><li><a href="index.html"><img src="images/pro_images/pro_home.png" alt=""></a></li><li><a href="404.html">Pages<span></span></a><ul><li><a href="under_construction.html">Under Construction</a></li><li><a href="intro.html">Intro Page</a></li><li><a href="404.html">404 page</a></li></ul></li><li><a href="layouts.html">Layouts</a></li><li><a href="typography.html">Typography</a></li><li class="current"><a href="portfolio.html">Gallery Layouts<span></span></a><ul><li><a href="portfolio.html">Portfolio</a></li><li class="current"><span></span><a href="just-slider.html">Sliders</a><ul><li><a href="just-slider.html">Just Slider</a></li><li><a href="kwicks.html">Kwicks Slider</a></li><li class="current"><a href="functional-slider.html">Functional Slider</a></li></ul></li><li><a href="gallery-page1.html">Gallery</a></li></ul></li><li><a href="misc.html">Extras<span></span></a><ul><li><a href="social_media.html">Social and Media<br> Sharing</a></li><li><a href="css3.html">CSS3 Tricks</a></li><li><a href="misc.html">Misc</a></li></ul></li></ul><div class="pro_clear"></div></div></div><div class="bg_pro2"></div></div>
<!-- PRO Framework Panel End -->
<!-- Header -->
<header>
    <div class="main">
        <h1><a href="index.html">Prospect</a></h1>
        <span class="phone">Call Toll-Free:  <span>1-800-559-65-80</span></span>
        <nav>
            <ul class="sf-menu">
                <li><a href="index.html">About us</a><ul>
                        <li><a href="more.html">Who We Are</a></li>
                        <li><a href="more.html">Our Mission</a></li>
                    </ul>
                </li>
                <li><a href="index-1.html">Services</a></li>
                <li><a href="index-2.html">Solutions</a></li>
                <li><a href="index-3.html">Support</a></li>
                <li><a href="index-4.html">partners</a></li>
                <li><a href="index-5.html">Contacts</a></li>
            </ul>
        </nav>
        <div class="clear"></div>
    </div>
</header>
<!-- Content -->
<section id="content">
	<div class="container_24">
		<div class="">
			<div class="grid_24">
			<h2 class="pro_title3">Functional Slider</h2>
				<div class="pro_funct_slider">
					<div class="fleft">
						<h6 class="pro_choose">Choose an effect</h6>
						<ul id="pro_choices">
							<li class="pro_btn">blindX</li>
							<li class="pro_btn">blindY</li>
							<li class="pro_btn">blindZ</li>
							<li class="pro_btn">cover</li>
							<li class="pro_btn">curtainX</li>
							<li class="pro_btn">curtainY</li>
							<li class="pro_btn">fade</li>
							<li class="pro_btn">fadeZoom</li>
							<li class="pro_btn">growX</li>
							<li class="pro_btn">growY</li>
							<li class="pro_btn">none</li>
							<li class="pro_btn">scrollUp</li>
							<li class="pro_btn">scrollDown</li>
							<li class="pro_btn">scrollLeft</li>
							<li class="pro_btn">scrollRight</li>
							<li class="pro_btn">scrollHorz</li>
							<li class="pro_btn">scrollVert</li>
							<li class="pro_btn">shuffle</li>
							<li class="pro_btn">slideX</li>
							<li class="pro_btn">slideY</li>
							<li class="pro_btn">toss</li>
							<li class="pro_btn">turnUp</li>
							<li class="pro_btn">turnDown</li>
							<li class="pro_btn">turnLeft</li>
							<li class="pro_btn">turnRight</li>
							<li class="pro_btn">uncover</li>
							<li class="pro_btn">wipe</li>
							<li class="pro_btn">zoom</li>
						</ul>
						<div class="hidden">Toggle the sync option to see how some effects behave differently (such as blind, curtain, and zoom).
						<input type="checkbox" checked="checked" /> sync: true</div>
					</div>
					<div class="pro_funct_box">
						<h6 id="pro_effect">Slideshow with default effect</h6>
						<div id="pro_show1"><div id="pro_slideshow1">
							<img src="images/stock_images/700x430_4.jpg" alt=""><img src="images/stock_images/700x430_2.jpg" alt=""><img src="images/stock_images/700x430_3.jpg" alt="">
						</div></div>
						<div id="pro_show"></div>
					</div>
				</div>
				<div class="pro_clear"></div>
				<dl class="pro_description-box pro_description-box-pad">
					<dt><a class="pro_description-dark">Description<span></span></a></dt>
					<dd>
						<div class="pro_inner">
						<p>To make the slider work <strong>jquery.cycle.all.min.js</strong> file is used</p>
						<p class="pro_descr_title">The HTML Slideshow Structure:</p>
<pre class="pro_htmlCode">&lt;div id="YourSlideshowID"&gt;
	&lt;img src="YourImage.jpg" alt=""&gt;
	&lt;img src="YourImage.jpg" alt=""&gt;
	&lt;img src="YourImage.jpg" alt=""&gt;
	...
&lt;/div&gt;</pre>
						<p>To add more images to the slider duplicate the following code:</p>
						<pre class="pro_htmlCode">&lt;img src="YourImage.jpg" alt=""&gt;</pre>
						<p>Using the src attribute define the path to the image file.</p>
						<p class="pro_descr_title">Basic initialization:</p>
<pre class="pro_jsCode">$('#YourSlideshowID').cycle({ fx:'TheEffectYouChoosed'});</pre>
						<p>To initialize the slider input the slider block ID(<strong>$('#YourSlideshowID')</strong>) and animation effect you want to use (<strong>fx:'TheEffectYouChoosed'</strong>).</p>
						</div>
					</dd>
				</dl>
			</div>
			<div class="pro_clear"></div>
		</div>
	</div>
</section>
<aside>
    <div class="container_24">
        <div class="wrapper">
            <article class="grid_12">
                <h6>Quick Links</h6>
                <div class="wrapper">
                    <article class="grid_4 alpha">
                        <ul>
                            <li><a href="more.html">About Us</a></li>
                            <li><a href="more.html">Testimonials</a></li>
                            <li><a href="more.html">Our Staff</a></li>
                            <li><a href="more.html">Events &amp; Press</a></li>
                            <li><a href="more.html">Contact Us</a></li>
                        </ul>
                    </article>
                    <article class="grid_4">
                        <ul>
                            <li><a href="more.html">Solutions &amp; Training</a></li>
                            <li><a href="more.html">Affiliate Program</a></li>
                            <li><a href="more.html">Production</a></li>
                            <li><a href="more.html">Risk Management</a></li>
                            <li><a href="more.html">Consultation</a></li>
                        </ul>
                    </article>
                    <article class="grid_4 omega">
                        <ul>
                            <li><a href="more.html">Sign Up</a></li>
                            <li><a href="more.html">Forums</a></li>
                            <li><a href="more.html">Affiliate Program</a></li>
                            <li><a href="more.html">FAQ</a></li>
                        </ul>
                    </article>
                </div>
            </article>
            <article class="grid_11 prefix_1">
                <h6>Contact Information</h6>
                <div class="wrapper">
                    <img class="img-indent-r" src="images/map.png" alt="">
                    <div class="extra-wrap">
                        <p>8901 Marmora Road Glasgow, D04 89GR</p>
                        Phone: +1 800 559 6580<br>
                        E-mail: mail@demolink.org<br>
                        <!--==============================footer=================================-->
                        <footer>
                            &copy; 2012 &nbsp; &nbsp;|&nbsp; &nbsp; <a href="index-6.html">Privacy Policy</a><br>
                        </footer>
                    </div>
                </div>
            </article>
        </div>
    </div>
</aside>
</body>
</html>